<!-- 第一个项目简介 -->
<template>
  <div class="mbmain">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <span>商城后台管理系统</span> -->
        <a href="http://test.xiaomingtx.top/#/login" target="_blank"
          style="text-decoration:none;">商城后台管理系统(点击跳转，账号：admin/admin)</a>
      </div>
      <div class="container">
        <div class="flexBox">
          <span>1、技术栈：Vue3、Vuex状态管理、Vue-Router，Vite构建工具，Axios，Echarts图表库，windicss框架, Element-plus组件库,VueUse工具库等。</span>
          <span>2、项目基于 Vue 框架，使用官方提供的 vuex 状态管理,vue-router 路由，同时界面采用 Element-plus 构建整体的 UI 框架。</span>
          <span>3、使用了路由的懒加载的方式，加快了页面的加载速度。</span>
          <span>4、进行组件的封装，实现代码重用,提高开发效率和代码质量,使得代码易于维护。</span>
          <span> 5、使用了 vuex 集中式的管理所有组件的状态。</span>
          <span>6、通过安装 Echarts，快速的绘制图表，进行数据的渲染与展示</span>
          <span>7、使用了Tinymce富文本编辑器</span>
          <span></span>
          <span>页面效果图： </span>
        </div>
        <span>1.首页-主控台</span>
        <img src="../../assets/images/pc/1.png" alt="" />
        <span>2.商品管理-商品管理</span>
        <img src="../../assets/images/pc/2.png" alt="" />
        <span>2.1商品管理-商品管理(新增|修改模态框)</span>
        <img src="../../assets/images/pc/3.png" alt="" />
        <span>2.2商品管理-分类管理</span>
        <img src="../../assets/images/pc/4.png" alt="" />
        <span>2.3商品管理-规划管理</span>
        <img src="../../assets/images/pc/5.png" alt="" />
        <span>2.4商品管理-优惠卷管理</span>
        <img src="../../assets/images/pc/6.png" alt="" />
        <span>3.用户管理-用户列表</span>
        <img src="../../assets/images/pc/7.png" alt="" />
        <span>3.1用户管理-会员等级</span>
        <img src="../../assets/images/pc/8.png" alt="" />
        <span>4.订单管理-订单列表</span>
        <img src="../../assets/images/pc/9.png" alt="" />
        <span>4.1订单管理-订单列表-多筛选条件</span>
        <img src="../../assets/images/pc/10.png" alt="" />
        <span>4.2订单管理-评论管理</span>
        <img src="../../assets/images/pc/11.png" alt="" />
        <span>5.管理员管理-管理员列表</span>
        <img src="../../assets/images/pc/12.png" alt="" />
        <span>5.1管理员管理-权限列表</span>
        <img src="../../assets/images/pc/13.png" alt="" />
        <span>5.2管理员管理-角色列表</span>
        <img src="../../assets/images/pc/14.png" alt="" />
        <span>5.3管理员管理-角色列表-权限配置</span>
        <img src="../../assets/images/pc/15.png" alt="" />
        <span>6.系统管理-系统设置</span>
        <img src="../../assets/images/pc/16.png" alt="" />
        <span>6.1系统管理-交易设置</span>
        <img src="../../assets/images/pc/17.png" alt="" />
        <span>6.2系统管理-物流设置</span>
        <img src="../../assets/images/pc/18.png" alt="" />
        <span>7.分销模块-分销员管理</span>
        <img src="../../assets/images/pc/19.png" alt="" />
        <span>7.1分销模块-分销设置</span>
        <img src="../../assets/images/pc/20.png" alt="" />
        <span>8.其它模块-图库管理</span>
        <img src="../../assets/images/pc/21.png" alt="" />
        <span>8.1分销模块-图库管理-模态框组件的封装</span>
        <img src="../../assets/images/pc/22.png" alt="" />
        <span>8.2分销模块-公告管理</span>
        <img src="../../assets/images/pc/23.png" alt="" />
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style lang="less" scoped>
/deep/.el-main {
  overflow: none;
  height: 0;
}

.mbmain {
  overflow-y: scroll;
  height: 600px;
}

.box-card {
  width: 100%;
  background-color: rgba(242, 242, 242, 0.6);
  margin-bottom: 10px;
}

.clearfix a {
  font-size: 16px;
  font-weight: 700;
  color: #555555;
}

.container {
  width: 100%;
  background-color: transparent;
  // height: 60vh;
  border-radius: 10px;

  span {
    font-size: 16px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
  }
}

.flexBox {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 600;

  span {
    height: 30px;
    line-height: 30px;
  }
}

img {
  width: 100%;
}
</style>
